<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload file</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="/gin_upload">
    <!--    文件夹 webkitdirectory-->
    <!--多文件上传-->
    <input id="file-uploader" type="file" name="f1" multiple="multiple"/><br/>
    <!--    <input id="file-uploader2" type="file" name="f1" multiple="multiple" accept="*/*"/><br/>-->
    <!--    <input id="file-uploader3" type="file" name="f1" accept=".jpg,.png"/><br/>-->
    <input type="submit" value="提交"/>
    <progress value="0" max="100">您的浏览器不支持progress元素</progress>
</form>
</body>
<script>
    const pro = document.getElementsByTagName('progress')[0]
    pro.value = 30
    const fileUploader = document.getElementById("file-uploader");
    const reader = new FileReader()
    reader.addEventListener('progress', (event) => {
        if (event.loaded && event.total) {
            pro.value = (event.loaded / event.total) * 100
        }
    })
    // 获取文件元数据
    fileUploader.addEventListener("change", (event) => {
        // 获取文件列表数组
        var files = event.target.files;
        for (const file of files) {
            const name = file.name
            const type = file.type ? file.type : "NA"
            const size = file.size
            const lastModified = file.lastModified
            console.log({file, name, type, size, lastModified})
        }
    })

    // FileReader 管理文件内容
    const reader2 = new FileReader()
    const fileUploader3 = document.getElementById("file-uploader3");
    fileUploader3.addEventListener('change', (event) => {
        const file = event.target.files[0]
        reader2.readAsDataURL(file)
        reader2.addEventListener('load', (event) => {
            const img = document.createElement('img')
            imageGrid.appendChild(img)
            img.src = event.target.result
            img.alt = file.name
        })
    })

</script>
</html>